<template>
	<el-dialog
		:visible="visible"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
		width="75%"
	>
		<div slot="title">
			操作记录
		</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="dataList"
			style="width: 100%;"
			:max-height="tableHeight"
			highlight-current-row
			header-align="center"
			:header-cell-style="getRowClass"
		>
			<el-table-column
				type="index"
				label="序号"
				width="100"
				align="center"
			/>
			<el-table-column
				align="center"
				label="操作时间"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作账号"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.operator || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作详情"
				min-width="300"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.content || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作备注"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.remark || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="截图"
				min-width="200"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<template v-if="scope.row.imageUrl">
						<el-image
							class="show-img"
							:src="scope.row.imageUrl"
							fit="contain"
							@click="showImg(scope.row.imageUrl)"
						></el-image>
					</template>
					<template v-else>
						-
					</template>
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
			<div style="text-align: center;">
				<el-button type="primary" @click="handleClose">
					{{ $t('member.close') }}
				</el-button>
			</div>
		</div>
		<image-viewer
			v-if="imgVisible"
			:visible.sync="imgVisible"
			:url-list="bigImage"
		/>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			tableHeight: 500,
			loading: false,
			dataList: [],
			imgVisible: false,
			bigImage: []
		}
	},
	methods: {
		showImg(imageUrl) {
			this.bigImage = [imageUrl]
			this.imgVisible = true
		},
		loadData() {
			this.loading = true
			const params = this.getParams({
				queryCondition: { ...this.detailData }
			})
			this.$api
				.getClubMemberOperationRecords(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record
						this.total = res?.data?.totalRecord
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
			this.bigImage = []
			this.imgVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	background-color: #333333;
	color: #ffffff;
	font-weight: 700;
	padding: 10px 20px 10px;
	text-align: center;
}

::v-deep .el-dialog__headerbtn {
	font-size: 24px;
	top: 10px;
	right: 10px;
}
::v-deep .el-dialog__close {
	color: #ffffff;
}

::v-deep .pageValue {
	position: unset;
	margin-left: 0px;
}
.show-img {
	width: 100px;
	height: 100px;
	cursor: pointer;
}
</style>
